<template>
  <div class="ticketoffice" v-if="cinema">
    <!-- 头部 -->
    <div class="maoyan">
      <div class="maoyan-l" @click="$router.back()">
        <img src="../assets/返回白.png" alt="" />
      </div>
      <div class="maoyan-c">{{ cinema.cinemaName }}</div>
      <div class="maoyan-r"></div>
    </div>

    <!-- 影院地址 -->
    <div class="cinema">
      <div class="title">{{ cinema.cinemaName }}</div>
      <div class="locat">{{ addr }}</div>

      <div class="locat-img">
        <img src="../assets/地址.png" alt="" />
      </div>
    </div>

    <!-- 影片列表 -->
    <div class="movie-block">
      <div class="movies" ref="moviesDom">
        <ul class="ull">
          <li
            v-for="(movie, i) in cinema.movies"
            :key="movie.id"
            @click="playmargin(movie)"
            :class="{ active: index === i }"
          >
            <div class="item-x"><img :src="movie.img" alt="" /></div>
          </li>
        </ul>
      </div>
      <!-- 电影名字评价 -->
      <div class="movie-info" v-if="cinema.movies[index]">
        <div class="movie-title">
          <span class="ti">{{ cinema.movies[index].nm }}</span>
          <span class="sc" v-if="cinema.movies[index].sc > 0"
            >{{ cinema.movies[index].sc }}<i>分</i></span
          >
          <span class="sc" v-else
            >{{ cinema.movies[index].wish }}<i>人想看</i></span
          >
        </div>
        <div class="movie-desc">{{ cinema.movies[index].desc }}</div>
      </div>
    </div>

    <!-- 今日和下一场 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in cinema.movies[index].shows" :key="item.showDate" :title="item.showDate">
        <!-- 电影时间场 -->
        <div class="show-wrap">
          <div></div>
          <div class="vip">
            <div class="label">折扣</div>
            <div class="label-text">开卡享优惠</div>
            <div class="process">10.9元起开卡</div>
          </div>
          <div class="show-list">
            <!-- 有场次 -->
            <div class="show-item" v-for="p in item.plist" :key="p.seqNo">
              <div class="beg">
                <div class="begin">{{ p.tm }}</div>
                <div class="end">{{ item.endTime }}散场</div>
              </div>
              <div class="block">
                <div class="lan">{{ p.lang }} {{ p.tp }}</div>
                <div class="hall">{{ p.th }}</div>
              </div>
              <div class="price">
                <div class="sellPr">
                  <span class="d">￥</span>
                  <span class="st">{{ p.baseSellPrice }}</span>
                </div>
                <div class="vipPrice">
                  <span class="icon">{{ p.vipPriceName }}</span>
                  <span class="num">￥{{ p.vipPrice }}</span>
                </div>
              </div>
              <div class="button">
                <div @click="choose(p)">购票</div>
              </div>
            </div>
            <!-- 没有场次 -->
            <div class="no-seat" v-show="item.plist == 0">
              <div class="icon-today"></div>
              <div class="text">影片未上映</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 小卖部 -->
    <div class="snackk">
      <div>{{ activity.title }}</div>
      <div class="desc">
        <img :src="activity.icon" alt="" />
        <span>{{ activity.desc }}</span>
      </div>
    </div>

    <div class="snack">
      <div class="snack-t">影院超值套餐</div>
      <div class="snack-b" v-for="item in snack" :key="item.dealId">
        <div class="snack-b-l">
          <img :src="item.imageUrl" alt="" />
          <div class="car">{{ item.cardTag }}</div>
        </div>
        <div class="snack-b-r">
          <div class="snack-b-rr">
            <span class="s">{{ item.titleTag }}</span>
            {{ item.title }}
          </div>
          <div class="sell">
            <div>{{ item.curNumberDesc }}</div>
          </div>
          <div class="buy">
            <div class="price">¥{{ item.price }}</div>
            <div class="btn">去购买</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  // props: ["cinema"],
  data: function () {
    return {
      activity: [], // 小卖部
      snack: [], // 小吃套餐
      cinema: null, // 影片相关数据购票场次
      index: 0, // 点击的电影数据
      active: 0,
      addr: "", // 影院地址
      list: [],
      cityname:[],
      loading:true,
    };
  },
  methods: {
    // 点击相应的电影跳转
    playmargin: function (movie) {
      // 路由更新之前先判断 是不是相同路由 编程式会报错（相同页面跳转）
      this.$router.replace({
        path: "/ticketoffice",
        query: {
          cinemaId: this.$route.query.cinemaId,
          movieId: movie.id,
          date: this.$route.query.date,
        },
      });
    },
getHistory() {
      //获取历史记录
      let re = localStorage.getItem("selecthistory");
      this.cityArr = JSON.parse(re)[0];
    },
    // 计算图片高亮
    imgActive: function (movieId) {
      if (movieId !== undefined) {
        console.log("方法调用 ");
        // 图片是数组的第几个
        this.index = this.cinema.movies.findIndex((m) => m.id == movieId);

        console.log("imgActive", movieId, this.index);

        console.log(this.$refs.moviesDom.scrollLeft);
        this.$refs.moviesDom.scrollLeft =
          this.$refs.moviesDom.querySelectorAll(".ull li")[
            this.index
          ].offsetLeft;
      }
    },

    // 点击跳转购票选座
    choose: function (p) {
      // console.log(p);
      this.$router.push({
        path: "/seat",
        query: {
          seqNo: p.seqNo,
          movieId: this.cinema.movies[this.index].id,
          movieNm: this.cinema.movies[this.index].nm,
          img: this.cinema.movies[this.index].img,
          cinema: this.cinema.cinemaName,
          plist: p,
          plists: this.cinema.movies[this.index].shows[0].plist,
        },
      });
    },
  },
  
  created: function () {
     this.getHistory();
    // 获取影院正上映的电影列表 点击banner
    this.axios
      .get("https://apis.netstart.cn/maoyan/cinema/shows", {
        params: {
          cinemaId: this.$route.query.cinemaId,
          ci: this.cityname.id,
          channelId: 4,
        },
      })
      .then((res) => {
        this.cinema = res.data.data;
        // let list = this.cinema.movies[this.index].shows;
        // this.list = this.cinema.movies[this.index].shows;
        this.addr = this.$route.query.addr;
        console.log(this.cinema);
      });

    this.axios
      .get("https://apis.netstart.cn/maoyan/cinema/queryDealList.json")
      .then((res) => {
        this.snack = res.data.data.dealList;
        this.activity = res.data.data.activity;
        // console.log(res.data);
      });
  },

  watch: {
    cinema: function (n) {
      if (n) {
        this.$nextTick(function () {
          this.imgActive(this.$route.query.movieId);
        });
      }
    },
    $route: function (n) {
      console.log("路由更新", n);
      this.imgActive(n.query.movieId);
    },
  },
  index: function () {
      // 获取影院正上映的电影列表 点击banner
    this.axios
      .get("https://apis.netstart.cn/maoyan/cinema/shows", {
        params: {
          cinemaId: this.$route.query.cinemaId,
          ci: this.cityname.id,
          channelId: 4,
        },
      })
      .then((res) => {
        this.cinema = res.data.data;
        // let list = this.cinema.movies[this.index].shows;
        this.list = this.cinema.movies[this.index].shows;
        this.addr = this.$route.query.addr;
        console.log(this.cinema);
      });
  }
};
</script>

<style lang="less" scoped>
.ticketoffice {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 24;
  background: white;

  .maoyan {
    padding: 6px;
    background-color: #e54847;
    height: 38px;
    width: 363px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .maoyan-l {
      width: 50px;
      height: 38px;
      img {
        margin-top: 10px;
        width: 21px;
        height: 21px;
      }
    }

    .maoyan-c {
      font-size: 18px;
      color: #fff;
      width: 263px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .maoyan-r {
      width: 50px;
      height: 38px;
    }
  }

  .cinema {
    padding: 15px 100px 15px 15px;
    position: relative;
    .title {
      width: 260px;
      line-height: 24px;
      font-weight: 700;
      color: #333;
      font-size: 17px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .locat {
      margin-top: 2px;
      font-size: 13px;
      width: 260px;
      line-height: 18.5px;
      color: #999;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .locat-img {
      position: absolute;
      right: 0;
      top: 26%;
      width: 70px;
      height: 31px;
      text-align: center;
      img {
        width: 21px;
        height: 22px;
        margin-top: 5px;
      }

      &::after {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 1px;
        content: "";
        background: #d8d8d8;
      }
    }
  }

  .movie-block {
    // overflow: hidden;
    .movies {
      height: 135px;
      width: 375px;
      background: #40454d;
      display: flex;
      align-items: center;
      overflow-x: auto;
      scroll-behavior: smooth;

      .ull {
        display: flex;
        align-items: center;
        padding: 5px 0;

        li {
          width: 65px;
          height: 95px;
          margin-right: 10px;

          &.active {
            width: 65px;
            height: 95px;
            position: relative;
            border: 1px solid white;

            &::after {
              content: "";
              position: absolute;
              bottom: -6px;
              left: 50%;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
              width: 10px;
              height: 5px;
              z-index: 24;
              background: url()
                no-repeat;
              background-size: contain;
            }

            .item-x {
              img {
                width: 65px;
                height: 95px;
              }
            }
          }

          .item-x {
            img {
              width: 65px;
              height: 95px;
            }
          }
        }
      }
    }
    .movie-info {
      padding: 11px 15px;
      text-align: center;
      border-bottom: 1px solid rgb(233, 230, 230);

      .movie-title {
        .ti {
          line-height: 24px;
          font-size: 17px;
          color: #333;
          font-weight: 700;
          margin-right: 4px;
        }
        .sc {
          color: #ffb400;
          font-size: 16px;
          i {
            font-size: 12px;
          }
        }
      }
      .movie-desc {
        margin-top: 2px;
        color: #999999;
        font-size: 13px;
      }
    }
  }

  .show-wrap {
    background: white;
    .vip {
      //   margin-top: -1px;
      height: 42px;
      background: #fff5ea;
      display: flex;
      padding: 0 15px;
      .label {
        background-color: #ff941a;
        border-radius: 2px;
        font-size: 12px;
        line-height: 15px;
        height: 15px;
        width: 34px;
        text-align: center;
        color: #fff;
        margin-top: 13px;
        margin-right: 10px;
      }
      .label-text {
        width: 221px;
        color: #fa9600;
        font-size: 12px;
        line-height: 42px;
      }
      .process {
        width: 80px;
        line-height: 42px;
        color: #999;
        font-size: 12px;
        &::after {
          display: inline-block;
          content: "";
          width: 7px;
          height: 7px;
          border-left: 1px solid #ccc;
          border-top: 1px solid #ccc;
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
        }
      }
    }
    .show-list {
      .show-item {
        display: flex;
        padding: 17px 12.5px;
        border-bottom: 1px solid rgb(233, 230, 230);
        .beg {
          width: 55px;
          .begin {
            font-size: 20px;
            color: #333;
            line-height: 1;
            white-space: nowrap;
          }
          .end {
            margin-top: 10px;
            color: #999;
            font-size: 11px;
            line-height: 1;
            white-space: nowrap;
          }
        }
        .block {
          margin-left: 17px;
          width: 96px;
          .lan {
            margin-top: 2px;
            line-height: 18px;
            font-size: 13px;
            color: #333;
            white-space: normal;
          }
          .hall {
            margin-top: 7px;
            font-size: 11px;
            color: #999;
            white-space: normal;
          }
        }
        .price {
          width: 130px;
          margin-left: 5px;
          display: flex;

          .sellPr {
            line-height: 1;
            color: #f03d37;
            margin-top: 1px;
            font-size: 19px;
            .d {
              font-size: 12px;
            }
            .st {
              line-height: 1;
              // margin-top: 1px;
            }
          }

          .vipPrice {
            line-height: 15px;
            height: 15px;
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
            -webkit-transform-origin: left;
            transform-origin: left;
            margin: 2px -16px 0 4px;
            border: 1px solid #ff9000;
            border-radius: 2px;
            font-size: 12px;
            .icon {
              color: #fff;
              background-color: #f90;
              line-height: 15px;
            }
            .num {
              padding: 0 2px;
              color: #f90;
              background-color: #fff;
            }
          }
        }
        .button {
          width: 45px;
          display: flex;
          align-items: center;
          margin-left: 2px;
          div {
            width: 100%;
            height: 25px;
            // margin-left: 10px;
            line-height: 26px;
            font-size: 12px;
            border: 1px solid #f06762;
            border-radius: 50px;
            color: #f03d37;
            text-align: center;
          }
        }
      }
      .no-seat {
        text-align: center;
        height: 230px;
        background-color: #f0f0f0;

        .icon-today {
          margin: auto;
          width: 77.5px;
          height: 71.5px;
          background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/today-no-show.3f026db3.png)
            no-repeat 50%;
          background-size: contain;
          padding-top: 50px;
        }
        .text {
          margin-top: 12px;
          line-height: 1;
          font-size: 16px;
          color: #acacac;
        }
      }
    }
  }

  .snack {
    padding: 0 15px;
    background: #fff;
    .snack-t {
      padding: 12px 0;
      font-size: 15px;
      color: #666666;
      border-bottom: 1px solid rgb(233, 230, 230);
    }
    .snack-b {
      display: flex;
      margin-top: 13px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgb(233, 230, 230);
      .snack-b-l {
        position: relative;
        img {
          width: 92px;
          height: 92px;
        }
        .car {
          position: absolute;
          left: 0;
          top: 0;
          height: 18px;
          line-height: 18px;
          background-color: #fa5939;
          font-size: 12px;
          padding: 0 5px;
          color: #fff;
          border-bottom-right-radius: 2px;
        }
      }
      .snack-b-r {
        width: 238px;
        margin-left: 14px;
        .snack-b-rr {
          display: flex;
          align-items: baseline;
          height: 36px;
          color: #333333;
          .s {
            display: inline-block;
            vertical-align: top;
            margin-top: 1px;
            margin-right: 7px;
            padding: 0 4px;
            font-size: 10px;
            line-height: 15px;
            height: 15px;
            background: #f90;
            border-radius: 2px;
            color: #fff;
          }
        }
        .sell {
          height: 29px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          div {
            line-height: 16px;
            height: 16px;
            font-size: 12px;
            color: #999;
          }
        }
        .buy {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 27px;
          .price {
            color: #f03d37;
            font-size: 17px;
          }
          .btn {
            padding: 0 8px;
            height: 27px;
            line-height: 27px;
            font-size: 12px;
            border-radius: 3px;
            color: #fff;
            background-color: #f03d37;
          }
        }
      }
    }
  }

  .snackk {
    height: 50px;
    padding-top: 5px;
    text-align: center;
    font-size: 14px;
    color: #e54847;
    background: #fff;
    border-bottom: 1px solid rgb(233, 230, 230);

    .desc {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      img {
        width: 15px;
        height: 15px;
        margin-right: 3px;
      }
      span {
        color: #fa9600;
        font-size: 12px;
      }
    }
  }
}
</style>